<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">		
		<title>Sky Mega Menu</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
		
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if lt IE 10]>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg-cyan">
		<div class="body">		
			<!-- mega menu -->
			<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-stack">
				<!-- six -->
				<li aria-haspopup="true">
					<a href="#">Six</a>
					<div class="grid-container12">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ six -->
				
				<!-- five -->
				<li aria-haspopup="true">
					<a href="#">Five</a>
					<div class="grid-container10">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ five -->
				
				<!-- four -->
				<li aria-haspopup="true">
					<a href="#">Four</a>
					<div class="grid-container8">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ four -->
				
				<!-- three -->
				<li aria-haspopup="true">
					<a href="#">Three</a>
					<div class="grid-container6">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ three -->
				
				<!-- two -->
				<li aria-haspopup="true">
					<a href="#">Two</a>
					<div class="grid-container4">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ two -->
				
				<!-- combination -->
				<li aria-haspopup="true" class="right">
					<a href="#">Combination</a>
					<div class="grid-container12">
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column5">
							<ul>
								<li><a href="#">Extra large first element with large amount of text</a></li>
								<li><a href="#">Extra large second element with large amount of text</a></li>
								<li><a href="#">Extra large third element with large amount of text</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column2">
							<ul>
								<li><a href="#">First element</a></li>
								<li><a href="#">Second element</a></li>
								<li><a href="#">Third element</a></li>
							</ul>
						</div>
						<div class="grid-column grid-column3">
							<ul>
								<li><a href="#">First element with text</a></li>
								<li><a href="#">Second element with text</a></li>
								<li><a href="#">Third element with text</a></li>
							</ul>
						</div>
					</div>
				</li>
				<!--/ combination -->
			</ul>
			<!--/ mega menu -->			
		</div>
	</body>
</html>